<!--
Copyright (c) 2019 The Khronos Group Inc.
Use of this source code is governed by an MIT-style license that can be
found in the LICENSE.txt file.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Upload texture from animating transparent WebM</title>
<link rel="stylesheet" href="../../../resources/js-test-style.css"/>
<script src="../../../js/js-test-pre.js"></script>
<script src="../../../js/webgl-test-utils.js"></script>
<script>
"use strict";
const wtu = WebGLTestUtils;
let gl;
let successfullyParsed;
let video;

initTestingHarness();

function init()
{
    description("Upload texture from animating transparent WebM");

    const canvas = document.getElementById("example");
    gl = wtu.create3DContext(canvas);

    const program = wtu.setupTexturedQuad(gl);
    const texture = gl.createTexture();
    // Bind the texture to texture unit 0
    gl.bindTexture(gl.TEXTURE_2D, texture);
    const textureLoc = gl.getUniformLocation(program, "tex");
    gl.uniform1i(textureLoc, 0);

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    video = document.getElementById("vid");
    const type = 'video/webm; codecs="vp8"';
    if (!video.canPlayType) {
        testFailed("video.canPlayType required method missing");
        finishTest();
        return;
    }
    if (!video.canPlayType(type).replace(/no/, '')) {
        debug(info.type + " unsupported");
        finishTest();
        return;
    };
    wtu.startPlayingAndWaitForVideo(video, runTest);
}

function runTest(videoElement)
{
    let i = 0;
    requestAnimationFrame(function frame() {
        runOneIteration(videoElement, false);
        runOneIteration(videoElement, true);

        ++i;
        if (i < 120) {
            requestAnimationFrame(frame);
        } else {
            wtu.glErrorShouldBe(gl, gl.NO_ERROR, "should be no errors");
            finishTest();
        }
    });

}

function runOneIteration(videoElement, useTexSubImage2D)
{
    // Upload the videoElement into the texture
    if (useTexSubImage2D) {
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
    } else {
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
    }

    // Set up texture parameters
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    // Draw the triangles
    wtu.clearAndDrawUnitQuad(gl, [255, 0, 0, 255]);

    const tolerance = 5;
    const red = [255, 0, 0];
    const green = [0, 255, 0];
    const blue = [0, 0, 255];

    // Check the left and right sides. Make sure that EITHER:

    // - Left is green and right is transparent-blended-with-red
    let leftIsGreen = false, leftIsRed = false, rightIsBlue = false, rightIsRed = false;
    let greenRedError = "", redBlueError = "";
    let leftGreenError = "", rightBlueError = "";
    let bufLeft, bufRight;
    wtu.checkCanvasRectColor(gl, 4, 4, 8, 24, green, tolerance,
        /* sameFn */ () => { leftIsGreen = true; }, /* differentFn */ (m, b) => { leftGreenError = m; bufLeft = b;}, debug);
    wtu.checkCanvasRectColor(gl, 20, 4, 8, 24, red, tolerance,
        /* sameFn */ () => { rightIsRed = true; }, /* differentFn */ (m, b) => { greenRedError = m; bufRight = b;}, debug);

    // - Right is blue and left is transparent-blended-with-red
    wtu.checkCanvasRectColor(gl, 20, 4, 8, 24, blue, tolerance,
        /* sameFn */ () => { rightIsBlue = true; }, /* differentFn */ (m, b) => { rightBlueError = m; bufRight = b;}, debug);
    wtu.checkCanvasRectColor(gl, 4, 4, 8, 24, red, tolerance,
        /* sameFn */ () => { leftIsRed = true; }, /* differentFn */ (m, b) => { redBlueError = m; bufLeft = b;}, debug);

    if (leftIsGreen) {
        if (rightIsRed) {
            testPassed("left is green, right is transparent-blended-with-red");
        } else {
            testFailed("left is green, but: " + greenRedError + "\n" + bufRight);
        }
    } else if (rightIsBlue) {
        if (leftIsRed) {
            testPassed("right is blue, left is transparent-blended-with-red");
        } else {
            testFailed("right is blue, but: " + redBlueError + "\n" + bufLeft);
        }
    } else {
        testFailed("neither left is green nor right is blue \n" + leftGreenError + "\n" + rightBlueError + "\n" + bufLeft + "\n" + bufRight);
    }
}
</script>
</head>
<body onload="init()">
<canvas id="example" width="32" height="32"></canvas>
<div id="description"></div>
<div id="console"></div>
<video id="vid" style="display:none;">
  <source src="../../../resources/transparent-2frames.webm" type='video/webm; codecs="vp8"' />
</video>
</body>
</html>
